import { useEffect, useState } from "react";
import { Modal, Row, Col } from "antd";
import ViewContainer from "@/biz-components/slice-file-upload/modal/view-container";

const DialogPrview = ({
  visible,
  onCancel,
  title = "详情",
  attachment: { name, id },
}) => {
  const [type, setType] = useState<string>("");
  const [viewId, setViewId] = useState<string>("");

  useEffect(() => {
    const types = name.split(".");
    setType(`.${types[1]}`);
    setViewId(id);
  }, [name, id]);

  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      width={1300}
      closable
      maskClosable
      bodyStyle={{
        overflowY: "auto",
      }}
      footer={null}
    >
      <Row>
        <Col span={24}>
          {type && viewId ? (
            <ViewContainer
              type={type}
              height={500}
              fileUrl={`/afm/attachment/download?code=${viewId}&optimize=false`}
            />
          ) : null}
        </Col>
      </Row>
    </Modal>
  );
};

export default DialogPrview;
